<template>
    <div class="comments mTop40" v-for="item in 3">
        <img src="" alt="" class="comments_img">
        <div class="comments_body">
            <div class="comments_name">Имя пользователя</div>
            <div class="comments_time mTop8 c99">2024-09-09 16:23 · XL/Синий</div>
            <div class="items mTop20">
                <div class="comments_evaluation cFF mRight10">Качество отличное</div>
                <div class="comments_evaluation cFF mRight10">Качество отличное</div>
            </div>
            <div class="items mTop20">
                <div class="comments_start items mRight60" v-for="item in 3">
                    <div class="start_title c99">Качество продукции</div>
                    <div class="start_num mLeft10">
                        <img src="/src/assets/icons/start_1.png" alt="" v-for="item in 4">
                        <img src="/src/assets/icons/start_2.png" alt="">
                    </div>
                </div>
            </div>
            <div class="comments_title mTop20 c33">
                Качество товаров очень хорошее, тонкая, красивая и щедрая работа, одетая очень
                молодая, но еще не легко деформирована, ткань удобная и воздухопроницаемая,
                стиль также хороший, одетый очень красиво! Товар действительно недорогой,
                настоящий, я буду продолжать поддерживать вас!
            </div>
            <div class="comments_imgs">
                <img src="" alt="" v-for="item in 4" class="mRight16 mTop20">
            </div>
        </div>
    </div>
</template>

<script lang="ts" name="Shopping_list" setup>
import { ref, reactive } from "vue";

// 组件传来的值
defineProps({
    // xlink:href属性的前缀
    shoppingList: {
        type: Array,
        default: [],
    },
})

let radio = ref(false)
let num = ref(0)


function handleChange() {

}

</script>
<script lang="ts">
export default {
    name: 'Home'
}
</script>

<style lang="less" scoped>
.comments {
    width: 100%;
    height: auto;
    display: flex;
    border-bottom: 1px solid #EEEEEE;

    .comments_img {
        width: 48px;
        height: 48px;
    }

    .comments_body {
        width: 100%;
        height: auto;
        margin-left: 20px;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;

        .comments_name {
            font-family: Segoe UI;
            font-size: 18px;
            font-weight: 600;
            line-height: 18px;

        }

        .comments_time {
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;
        }

        .comments_evaluation {
            padding: 8px;
            background: #0070E9;
            border-radius: 8px;
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;
        }

        .comments_start {
            .start_title {
                font-family: PingFang SC;
                font-size: 14px;
                font-weight: 400;
                line-height: 14px;
            }

            .start_num {
                img {
                    width: 14px;
                    height: 14px;
                    margin-right: 5px;
                }
            }
        }

        .comments_title {
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
            line-height: 21px;

        }

        .comments_imgs {
            margin-bottom: 67px;

            img {
                width: 280px;
                height: 280px;
                border-radius: 8px;
            }
        }
    }
}
</style>
